Skip to content

Make sure HeaderFooterPage can contents be scrolled #4704

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: develop
Choose a base branch
from

Conversation

jmartinesp
Copy link
Member

Content

  • Remove .weight(1f) modifier in the HeaderFooterView content wrapper so it can be scrolled.
  • Make sure the scroll is focused on the textfield in the SecureBackupEnterRecoveryKeyView component when it's focused and the IME opens.
  • Make the TopAppBar container color in FlowStepPage transparent so the scrolling content is not cut-off by it.

Motivation and context

The recovery key screen (and others) was not scrollable anymore, ruining the UX.

Screenshots / GIFs

There are a few screenshots in the PR.

Tests

  • Log in, select 'use recovery key to verify'.
  • Make sure the view is scrollable when the keyboard opens and the textfield is visible.

Tested devices

  • Physical
  • Emulator
  • OS version(s): 14

Checklist

  • Changes have been tested on an Android device or Android emulator with API 24
  • UI change has been tested on both light and dark themes
  • Accessibility has been taken into account. See https://github.com/element-hq/element-x-android/blob/develop/CONTRIBUTING.md#accessibility
  • Pull request is based on the develop branch
  • Pull request title will be used in the release note, it clearly define what will change for the user
  • Pull request includes screenshots or videos if containing UI changes
  • You've made a self review of your PR

@jmartinesp jmartinesp requested a review from a team as a code owner May 12, 2025 07:55
@jmartinesp jmartinesp requested review from ganfra and removed request for a team May 12, 2025 07:55
@jmartinesp jmartinesp added the PR-Bugfix For bug fix label May 12, 2025
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is sadly a side-effect of removing the weight(1f) modifier. I'm not sure we can really do something about it 🫤 .

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

github-actions bot commented May 12, 2025

📱 Scan the QR code below to install the build (arm64 only) for this PR.
QR code
If you can't scan the QR code you can install the build via this link:

@jmartinesp jmartinesp added the Record-Screenshots Runs the 'Record Screenshots' CI job and adds a commit with any new screenshots found. label May 12, 2025
@github-actions github-actions bot removed the Record-Screenshots Runs the 'Record Screenshots' CI job and adds a commit with any new screenshots found. label May 12, 2025
Copy link

codecov bot commented May 12, 2025

Codecov Report

Attention: Patch coverage is 94.11765% with 1 line in your changes missing coverage. Please review.

Project coverage is 80.11%. Comparing base (83406ec) to head (33db77f).
Report is 1 commits behind head on develop.

Files with missing lines Patch % Lines
...kup/impl/enter/SecureBackupEnterRecoveryKeyView.kt 92.30% 0 Missing and 1 partial ⚠️
Additional details and impacted files
@@           Coverage Diff            @@
##           develop    #4704   +/-   ##
========================================
  Coverage    80.11%   80.11%           
========================================
  Files         2126     2126           
  Lines        56303    56317   +14     
  Branches      7021     7022    +1     
========================================
+ Hits         45107    45120   +13     
  Misses        8780     8780           
- Partials      2416     2417    +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link
Member

@ganfra ganfra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the changes, 2 remarks/questions

@Composable
private fun Content(
state: SecureBackupEnterRecoveryKeyState,
) {
val bringIntoViewRequester = remember { BringIntoViewRequester() }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FocusRequester is not enough?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That made the textfield visible, but only half of it (the other half was under the IME).

) {
// Header
header()
Box(modifier = Modifier.weight(1f)) {
Box {
content()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should add some padding between the footer and the content? This looks a bit weird without

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm... maybe, but maybe that should be added for the content on each screen? Otherwise we need to remember we have 10-16.dp here and substract it from whatever we have in the designs.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ganfra just to remind you of this question: should we add a default padding for all screens and then diff with the designs or leave it at 0 and just apply the padding to each content component so it matches the designs 1:1?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can it be a padding on top of the button?

Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
PR-Bugfix For bug fix
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants